import React, { Component } from 'react';

import LifeCycleComponent from '../../components/lifeCycle/lifeCycle.jsx';

export default class lifeCycle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 1,
            ifLoadComponent: false
        }
    }

    // 更新组件值
    add(value) {
        this.setState({
            count: this.state.count + value
        })
    }
    // 更新组件值
    decrease(value) {
        this.setState({
            count: this.state.count - value
        })
    }
    // 挂载
    mountComponent() {
        this.setState({
            ifLoadComponent: true
        })
    }
    // 卸载
    unMountComponent() {
        this.setState({
            ifLoadComponent: false
        })
    }
    render() {
        return (
            <div>
                <button onClick={() => this.mountComponent()}>挂载组件</button>
                <button onClick={() => this.unMountComponent()}>卸载组件</button>
                <p>组件是否挂载{this.state.ifLoadComponent + ''}</p>
                {this.state.ifLoadComponent ? (
                    <div>
                        <LifeCycleComponent count={this.state.count} />
                        <button onClick={() => this.add(1)}>
                            count 加一
                        </button>
                        <span>{this.count}</span>
                        <button onClick={() => this.decrease(1)}>
                            count 减一
                        </button>
                    </div>) : null}
            </div>
        )
    }
}